#混合グラフの種類

Chart.js を使用すると、2 つ以上の異なるグラフタイプを組み合わせた混合グラフを作成できます。一般的な例は、折れ線データセットも含まれる棒グラフです。

混合グラフを作成するときは、各データセットでグラフの種類を指定します。

const mixedChart = new Chart(ctx, {
    data: {
        datasets: [{
            type: 'bar',
            label: 'Bar Dataset',
            data: [10, 20, 30, 40]
        }, {
            type: 'line',
            label: 'Line Dataset',
            data: [50, 50, 50, 50],
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: options
});

この時点で、希望どおりにレンダリングされたチャートが完成しました。この場合、グラフのデフォルトオプションはデータセットレベルでのみ考慮され、グラフレベルではマージされないことに注意することが重要です。

const 構成 = {
  タイプ: '散布'、
  データ: データ、
  オプション: {
    スケール: {
      y: {
        beginAtZero: true
      }
    }
  }
};const config = {
  type: 'scatter',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

#描画順序

デフォルトでは、最初のデータセットが最上位になるようにデータセットが描画されます。これは指定することで変更できますorderデータセットのオプション。orderデフォルトは0。これは、積み重ね、凡例、ツールチップにも影響することに注意してください。したがって、基本的にはデータセットの順序を変更するのと同じです。

のorderプロパティは特定の順序ではなく重みのように動作するため、数値が大きいほど、そのデータセットがキャンバス上に早く描画され、その結果、より低い順序番号を持つ他のデータセットがその上に描画されます。

const mixedChart = new Chart(ctx, {
   type: 'bar',
   data: {
       datasets: [{
           label: 'Bar Dataset',
           data: [10, 20, 30, 40],
           // this dataset is drawn below
           order: 2
       }, {
           label: 'Line Dataset',
           data: [10, 10, 10, 10],
           type: 'line',
           // this dataset is drawn on top
           order: 1
       }],
       labels: ['January', 'February', 'March', 'April']
   },
   options: options
});

←折れ線グラフ極域グラフ→